<%@page import="org.springframework.web.context.annotation.RequestScope"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/WEB-INF/jsp/common/top_resources.jsp"%>
<link rel="stylesheet" type="text/css" href="${_root}/resources/css/jquery.tmailsilder.v2.css" />
<link rel="stylesheet" type="text/css" href="${_root}/resources/css/details/jquery.bxslider.css"/>
<link rel="stylesheet" type="text/css" href="${_root}/resources/css/details/style.css"/>
	<link rel="stylesheet" href="${_root}/resources/css/toastr.css">
<title>文章详情页</title>
<style>
		.article_container {
			word-break: break-all;
			padding: 10px 0 0;
			height: auto;
			overflow: hidden;
			font-size: 16px;
			text-align: left;
			color: #2f2f2f;
			line-height: 1.5;
			float: left;
			position: relative;
		}
		
		.comment-reply{
		}
</style>
</head>
<body class=" theme-blue">
<%@include file="/WEB-INF/jsp/common/top.jsp"%>	

<c:set var="imgroot" value="http://localhost:8080/pic/"></c:set>
<div class="container ">

<section style="margin-top:120px">
		<div class="row">
			<div class="col-md-8">
				<article class="blog-post">
					<div class="blog-post-image">
						<a href="post.html"><img src="" alt=""></a>
					</div>
					<div class="blog-post-body">
						<h2><a href="post.html">${result.data.article.title}</a></h2>
						<div class="post-meta"><span>by <a href="#">${result.data.author.name}</a>
							</span>/<span>
							<i class="fa fa-clock-o"></i>
							<fmt:formatDate value="${result.data.article.tdate}" pattern="yyyy年MM月dd日"/>
							</span>/<span>
							<i class="fa fa-comment-o"></i> <a href="#">10</a></span>
						</div>
							<div class="article_container">
								<table>
									<tbody>
										<tr id="articleContent">
											<td>
												${result.data.content}
											</td>
										</tr>
									</tbody>
								</table>
							</div>
					</div>
				</article>
				<button type="button" class="pull-right btn-default btn"  id="collectArti">收藏</button>
				<div class="row">
					<div class="col-lg-12">
						<div class="form-group">
							<label class="control-label"><h2>发表评论</h2></label>
							<textarea id="mycomment" class="form-control" rows="3"></textarea>
						</div>
						<div class="form-group">
							<button type="button" class="pull-right btn-default btn" onclick="actionComment('${sessionScope.user.id}','${param.id}')">发表</button>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<h3>评论区</h3>
						<div class="comments">
							<c:forEach items="${result.data.rootcomments}" var="item">
								<div class="media">
								<a class="pull-left" href="#">
									<img class="media-object" style="width: 64px; height: 64px;" src="${item.userinfo.avator}">
								</a>
								<div class="media-body">
									<h4 class="media-heading">${item.userinfo.name}</h4>
									<p>${item.content}
										<br>
										<a class="comment-reply" href="#" style="font-size: .8em;" data-comment-id="${item.id}" data-comment-target='${item.userinfo.id}' data-comment-targetname='${item.userinfo.name}'>回复</a>
									</p>
									<c:forEach items="${result.data.replies}" var="item1">
										<c:if test="${item.id==item1.pid}">
											<p><span class="user-name">${item1.sendInfo.name}</span>&nbsp;回复&nbsp;<span class="user-name">${item1.receiveInfo.name}</span>：${item1.content}
												<br>
												<a class="comment-reply" href="#" style="font-size: .8em;" data-comment-id="${item.id}" data-comment-target='${item1.sendInfo.id}' data-comment-targetname='${item1.sendInfo.name}'>回复</a>
											</p>
										</c:if>
									</c:forEach>
								</div>
							</div>
							</c:forEach>
						</div>
				
					</div>
				</div>
			</div>
			<div class="col-md-4 sidebar-gutter">
				<aside>
					<!-- sidebar-widget -->
					<div class="sidebar-widget">
						<h3 class="sidebar-title">关于作者</h3>
						<div class="widget-container widget-about">
							<a href="post.html"><img src="${result.data.author.avator}"style="height:216px" alt="作者主页照"></a>
							<h4><a href="post.html">${result.data.author.name}</a></h4>
							<!-- <div class="author-title">职业</div> -->
							<!-- <p>个人介绍</p> -->
						</div>
					</div>
					<!-- sidebar-widget -->
					<div class="sidebar-widget">
						<h3 class="sidebar-title">相关的文章发表</h3>
						<div class="widget-container">
						<c:choose>
							   <c:when test="${result.data.articles==null}"> 
									<h3>该用户还未发表其他文章哦!</h3>     
							   </c:when>
							   <c:otherwise>
									<c:forEach items="${result.data.articles}" var="item">
										<article class="widget-post">
											<div class="post-image">
												<a href="${_root}/article/detail?id=${item.id}"><img src="${imgroot}${item.imageUrl}" alt=""></a>
											</div>
											<div class="post-body">
												<h2><a href="${_root}/article/detail?id=${item.id}">${item.title}</a></h2>
												
												<div class="post-meta">
													<span>
														<i class="fa fa-clock-o"></i>
														<fmt:formatDate value="${item.tdate}" pattern="yyyy年MM月dd日"/>
													</span> 
													<span><a href="post.html"><i class="fa fa-comment-o"></i> 23</a></span>
												</div>
											</div>
										</article>
									</c:forEach>
							   </c:otherwise>
						</c:choose>
						</div>
					</div>
					<!-- sidebar-widget -->
					<div class="sidebar-widget">
						<h3 class="sidebar-title">文章标签</h3>
						<div class="widget-container">
							<ul>
								<li>
									<a href="#">Fashion</a>
								</li>
								<li>
									<a href="#">Art</a>
								</li>
								<li>
									<a href="#">Design</a>
								</li>
								<li>
									<a href="#">Featured</a>
								</li>
								<li>
									<a href="#">Graphics</a>
								</li>
								<li>
									<a href="#">Peoples</a>
								</li>
								<li>
									<a href="#">Uncategorized</a>
								</li>
							</ul>
						</div>
					</div>
			</div>
		</div>
</section>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">收藏文章</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" action="#">
					<input type="hidden" name="uid" value='1' />
					<div class="form-group">
						<label for="name" class="control-label col-lg-3">文章名:</label>
						<div class="col-lg-9">
							<p class="form-control-static">这是文章标题</p>
						</div>
					</div>
					<!-- 请更新这里 拜托了 SVN大兄弟 -->
					<div class="form-group">
						<label for="articleType" class="control-label col-lg-3">请选择分类:</label>
						<div class="col-lg-9">
							<select id="typeID" data-placeholder="Your Favorite Football Team" id="articleType" class="form-control chzn-select" tabindex="5">
					            <c:forEach items="${result.data.typeList}" var="item1">
									<c:if test="${item1.pid==1}">
										<optgroup label="${item1.name}">
										<c:forEach items="${result.data.typeList}" var="item2">
											<c:if test="${item1.id==item2.pid}">
												<option value="${item2.id}">${item2.name}</option>
											</c:if>
										</c:forEach>
									</c:if>
								</c:forEach>
							</select>
						</div>

					</div>
					<!-- 请更新这里 拜托了 SVN大兄弟 -->
				</form>
				<!--用来表示用户id-->

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="collBtn">收藏</button>
			</div>
		</div>
	</div>
</div>
<!--登录模态框-->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">请您先登录</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" name="loginForm" action="#" >
          <div class="form-group">
            <label for="recipient-name" class="control-label col-lg-2">login:</label>
            <div class="col-lg-9">
            	<input type="text" class="form-control" name="login" >
            </div>
            
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label col-lg-2">password:</label>
            <div class="col-lg-9">
            	<input type="password" class="form-control" name="pwd"/>
            </div>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="submit"  class="btn btn-primary" id="loginBtn">登录</button>
      </div>
      </form>
    </div>
  </div>
</div>
 <!--回复框-->
 <div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="exampleModalLabel">回复</h4>
       </div>
       <div class="modal-body">
         <form name="replyForm" action="">
           <div class="form-group">
           	<!--代表发送者接收者id-->
           	<input type="hidden" name="sendID" value="${user.id}"/>
           	<input type="hidden" name="receiveID" value="" />
           	<input type="hidden" name="pid" value=""/>
            <label for="recipient-name" class="control-label">To:</label>
            <input type="text" id="reciveName" class="form-control" value="@崇林"/>
           </div>
           <div class="form-group">
             <label for="message-text" class="control-label">写入回复:</label>
             <textarea class="form-control" name="content" value=""></textarea>
           </div>
         </form>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-primary" id="sendReplyBtn">发送回复</button>
       </div>
     </div>
   </div>
 </div>	
<%@include file="/WEB-INF/jsp/common/buttom_resources.jsp"%>
<script type="text/javascript" src="${_root}/resources/js/toastr.js" ></script>
<script type="text/javascript" src="/cms/resources/js/detail/detail.js"></script>
<script type="text/javascript">
/**
 * 登录模块初始化
 */
(function(){
	$(document.forms['loginForm']).formValidation({
		message:'不是有效的值',
		icon:{
			valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
		},
		//要验证的域
		fields:{
			login:{
				validators:{
					notEmpty:{
						message:'用户名不能为空'
					}
				}
			},
			pwd:{
				//验证原密码
				validators:{
					notEmpty:{
						message:'密码不能为空'
					}
				}
			}
		}
	//要验证的域
	}).bind('success.form.fv',function(e){
		e.preventDefault();//防止表单自动提交
		//下面开始完成登录操作
		//点击登录时，通过ajax发送请求进行登录
		var formData=$(document.forms['loginForm']).serialize();
		const loginUrl="${_root}/ajaxlogin";//登录url
		$.ajax(loginUrl,{
			dataType:'json',
			data:formData,
			success:function(json){
				if(json.status==200){
					//登录成功
					toastr.info("登录成功");
					$('#loginModal').modal('hide');//隐藏登录模态框
					location.reload();
				}else if(json.status==500){
					toastr.info(json.msg);
				}
			 	
			},
			error:function(){
				
			}
		});
	});
})();
function assertUserLogin(){
	var data={
		status:false
	};
	var baseUrl="/cms/user/assert";
	//判断用户是否已经登录，如果
	$.ajax(baseUrl,{
		type:'post',
		dataType:'json',
		async:false,
		data:{_login:true},
		success:function(json){
			
			if(json.status==200){
				//用户已经登录
				data['status']=true;//已登录
				data['user']=json.data.user;
			}else if(json.status==403){
				console.log('用户还未登录');
			}else{
				console.log('未知原因');
			}
		}
	});
	console.log("data:"+data);
	return data;
}
/*
 * 该方法用于弹出模态框进行登录
 */
function loginHandler(){
	$('#loginModal').modal('show');//显示登录模态框
	$('#loginBtn').bind('submit',function(){
		$(document.forms['loginForm']).formValidation('validate');//验证表单
	});
}
$(function(){
	
	//为收藏按钮添加事件
	$('#collectArti').bind('click',function(){
		var result=assertUserLogin();//看看用户是否已经登录


		var list = '${result.data.typeList}';

		if(!result.status){
			//用户还未登录？，弹出登录模态框进行登录
			loginHandler();
			return;
		}else if(list==null||list.length==0){
			toastr.info("请您在个人中心->收藏管理 至少添加二级分类,为您带来的不便，很抱歉！");
		}else{
			$('#myModal').modal('show');//显示收藏模态框
		}
		//登录以后收藏的真正业务代码开始')

/* 		alert(${param.id})
		alert($("#typeID").val()) */
		$('#collBtn').bind('click',function(){
			$.getJSON("/cms/coll/insertColl",{"articleID":${param.id},"usertypeID":$("#typeID").val()},function(result){
				if(result.data.reply==0){
					$('#myModal').modal('hide');
					toastr.info("添加失败,已添加该文章");
				}else{
					$('#myModal').modal('hide');
					location.href="/cms/jsp/collection";
				}
			})
		});


	});
});



/*
 * 这里回复相关js----------------
 */
 (function(){
		//为所有的回复添加事件
	$jq3('.comment-reply').each(function(){
		$jq3(this).on('click',function(){
			var result=assertUserLogin();//看看用户是否已经登录
			if(!result.status){
				//用户还未登录？，弹出登录模态框进行登录
				loginHandler();
				return;
			}
			//修改表单数据
			var receiveID=$jq3(this).data('comment-target');//获取接受者id
			var cid=$jq3(this).data('comment-id');//评论id
			var reciveName=$jq3(this).data('comment-targetname');//接收者姓名
			$('#replyModal').modal('show');//显示框
			$jq3("input[name='pid']",document.forms['replyForm']).val(cid);
			$jq3("input[name='receiveID']",document.forms['replyForm']).val(receiveID);
			$jq3('#reciveName').val(reciveName);
		});
	});
	//回复按钮
	$jq3('#sendReplyBtn').on('click',function(){
		var form=$jq3(document.forms['replyForm']);
		var content=$jq3("textarea[name='content']",form).val();
		console.log("content:"+content);
		if(content==''){
			toastr.info("回复内容不能为空!");
			return;
		}
		const baseURL="/cms/article/reply";//回复的基础链接
		$jq3.ajax(baseURL,{
			data:form.serialize(),
			dataType:'json',
			success:function(json){
				if(json.status==200){
					form[0].reset();//清空表单
					$('#replyModal').modal('hide');//回复成功
					toastr.info("回复成功");
					location.reload();
				}else{
					toastr.info("回复失败");
				}
			},
			error:function(){
				toastr.info("未知错误，提交失败");
			}
		});
		
	});
})();	
</script>
</body>
</html>